<template>
	<div style="padding: 20px 5px;">
		<div style="margin: 0 30px;">
			<el-form :inline='true' :model='getBooks' class="demo-form-inline">
				<el-row type='flex' justify="space-around">
					<el-col :span='8'>
						<el-form-item label="图书名称：">
							<el-input v-model="getBooks.bookName" placeholder="请输入" clearable @change='changeFun'></el-input>
						</el-form-item>
					</el-col>
					<el-col :span='8'>
						<el-form-item label="作者名称：">
							<el-input v-model="getBooks.authorName" placeholder="请输入" clearable @change='changeFun'></el-input>
						</el-form-item>
					</el-col>
					<el-col :span='8'>
						<el-form-item label="ISBN 号：">
							<el-input v-model="getBooks.ISBNNum" placeholder="请输入" clearable @change='changeFun'></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span='8' :offset='0'>
						<el-form-item label="图书分类：">
							<el-input v-model="getBooks.bookClass" placeholder="请输入" clearable @change='changeFun'></el-input>
						</el-form-item>
					</el-col>
					<el-col :span='8' :offset='0'>
						<el-form-item label="出 版 社 ：">
							<el-input v-model="getBooks.press" placeholder="请输入" clearable @change='changeFun'></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>

		<div style="margin:10px 0 10px;" v-loading.lock='flag'>
			<el-table :data="tableData" style="width: 99%;" :header-cell-style="{background:'rgb(235,236,240)',color:'#333'}">
				<el-table-column prop="isbn" label="ISBN号">
				</el-table-column>
				<el-table-column prop="class" label="图书类型">
				</el-table-column>
				<el-table-column prop="name" label="图书名称" width='180'>
				</el-table-column>
				<el-table-column prop="author" label="作者名称" width='180'>
				</el-table-column>
				<el-table-column prop="press" label="出版社" width='180'>
				</el-table-column>
				<el-table-column prop="date" label="日期">
				</el-table-column>
				<el-table-column prop="total" label="总数">
				</el-table-column>
				<el-table-column prop="nums" label="在馆数量">
				</el-table-column>
				<el-table-column prop="price" label="价格">
				</el-table-column>
				<el-table-column label="操作" width='180'>
					<el-row>
						<el-button size="medium" :plain='true' @click='lookupFun'>查看</el-button>
						<el-button size="medium" type="primary" :plain='true' @click='borrowFun'>借阅</el-button>
					</el-row>
				</el-table-column>
			</el-table>
			<div class="paging">
				<el-pagination background layout="prev, pager, next" :total="100" @current-change='currentChangeFun'>
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [{
						isbn: '001',
						class: '计算机',
						name: 'Javascript高级程序设计',
						author: 'Nicholas C.Zakas',
						press: '中国公信出版社',
						date: '2025-3-3',
						total: '300',
						nums: '280',
						price: '29.88'
					},
					{
						isbn: '002',
						class: '计算机',
						name: 'Javascript高级程序设计',
						author: 'Nicholas C.Zakas',
						press: '中国公信出版社',
						date: '2025-3-3',
						total: '300',
						nums: '280',
						price: '29.88'
					},
					{
						isbn: '003',
						class: '计算机',
						name: 'Javascript高级程序设计',
						author: 'Nicholas C.Zakas',
						press: '中国公信出版社',
						date: '2025-3-3',
						total: '300',
						nums: '280',
						price: '29.88'
					},
					{
						isbn: '004',
						class: '计算机',
						name: 'Javascript高级程序设计',
						author: 'Nicholas C.Zakas',
						press: '中国公信出版社',
						date: '2025-3-3',
						total: '300',
						nums: '280',
						price: '29.88'
					},
					{
						isbn: '005',
						class: '计算机',
						name: 'Javascript高级程序设计',
						author: 'Nicholas C.Zakas',
						press: '中国公信出版社',
						date: '2025-3-3',
						total: '300',
						nums: '280',
						price: '29.88'
					},
					{
						isbn: '006',
						class: '计算机',
						name: 'Javascript高级程序设计',
						author: 'Nicholas C.Zakas',
						press: '中国公信出版社',
						date: '2025-3-3',
						total: '300',
						nums: '280',
						price: '29.88'
					},
					{
						isbn: '007',
						class: '计算机',
						name: 'Javascript高级程序设计',
						author: 'Nicholas C.Zakas',
						press: '中国公信出版社',
						date: '2025-3-3',
						total: '300',
						nums: '280',
						price: '29.88'
					},
					{
						isbn: '008',
						class: '计算机',
						name: 'Javascript高级程序设计',
						author: 'Nicholas C.Zakas',
						press: '中国公信出版社',
						date: '2025-3-3',
						total: '300',
						nums: '280',
						price: '29.88'
					},
					{
						isbn: '009',
						class: '计算机',
						name: 'Javascript高级程序设计',
						author: 'Nicholas C.Zakas',
						press: '中国公信出版社',
						date: '2025-3-3',
						total: '300',
						nums: '280',
						price: '29.88'
					},
					{
						isbn: '010',
						class: '计算机',
						name: 'Javascript高级程序设计',
						author: 'Nicholas C.Zakas',
						press: '中国公信出版社',
						date: '2025-3-3',
						total: '300',
						nums: '280',
						price: '29.88'
					},
					{
						isbn: '011',
						class: '计算机',
						name: 'Javascript高级程序设计',
						author: 'Nicholas C.Zakas',
						press: '中国公信出版社',
						date: '2025-3-3',
						total: '300',
						nums: '280',
						price: '29.88'
					},
					{
						isbn: '012',
						class: '计算机',
						name: 'Javascript高级程序设计',
						author: 'Nicholas C.Zakas',
						press: '中国公信出版社',
						date: '2025-3-3',
						total: '300',
						nums: '280',
						price: '29.88'
					},
					{
						isbn: '013',
						class: '计算机',
						name: 'Javascript高级程序设计',
						author: 'Nicholas C.Zakas',
						press: '中国公信出版社',
						date: '2025-3-3',
						total: '300',
						nums: '280',
						price: '29.88'
					},
					{
						isbn: '014',
						class: '计算机',
						name: 'Javascript高级程序设计',
						author: 'Nicholas C.Zakas',
						press: '中国公信出版社',
						date: '2025-3-3',
						total: '300',
						nums: '280',
						price: '29.88'
					},
					{
						isbn: '015',
						class: '计算机',
						name: 'Javascript高级程序设计',
						author: 'Nicholas C.Zakas',
						press: '中国公信出版社',
						date: '2025-3-3',
						total: '300',
						nums: '280',
						price: '29.88'
					},
					{
						isbn: '016',
						class: '计算机',
						name: 'Javascript高级程序设计',
						author: 'Nicholas C.Zakas',
						press: '中国公信出版社',
						date: '2025-3-3',
						total: '300',
						nums: '280',
						price: '29.88'
					},
					{
						isbn: '017',
						class: '计算机',
						name: 'Javascript高级程序设计',
						author: 'Nicholas C.Zakas',
						press: '中国公信出版社',
						date: '2025-3-3',
						total: '300',
						nums: '280',
						price: '29.88'
					},
					{
						isbn: '018',
						class: '计算机',
						name: 'Javascript高级程序设计',
						author: 'Nicholas C.Zakas',
						press: '中国公信出版社',
						date: '2025-3-3',
						total: '300',
						nums: '280',
						price: '29.88'
					},
					{
						isbn: '019',
						class: '计算机',
						name: 'Javascript高级程序设计',
						author: 'Nicholas C.Zakas',
						press: '中国公信出版社',
						date: '2025-3-3',
						total: '300',
						nums: '280',
						price: '29.88'
					},
					{
						isbn: '020',
						class: '计算机',
						name: 'Javascript高级程序设计',
						author: 'Nicholas C.Zakas',
						press: '中国公信出版社',
						date: '2025-3-3',
						total: '300',
						nums: '280',
						price: '29.88'
					},
					{
						isbn: '021',
						class: '计算机',
						name: 'Javascript高级程序设计',
						author: 'Nicholas C.Zakas',
						press: '中国公信出版社',
						date: '2025-3-3',
						total: '300',
						nums: '280',
						price: '29.88'
					},
					{
						isbn: '022',
						class: '计算机',
						name: 'Javascript高级程序设计',
						author: 'Nicholas C.Zakas',
						press: '中国公信出版社',
						date: '2025-3-3',
						total: '300',
						nums: '280',
						price: '29.88'
					},
					{
						isbn: '023',
						class: '计算机',
						name: 'Javascript高级程序设计',
						author: 'Nicholas C.Zakas',
						press: '中国公信出版社',
						date: '2025-3-3',
						total: '300',
						nums: '280',
						price: '29.88'
					},
					{
						isbn: '024',
						class: '计算机',
						name: 'Javascript高级程序设计',
						author: 'Nicholas C.Zakas',
						press: '中国公信出版社',
						date: '2025-3-3',
						total: '300',
						nums: '280',
						price: '29.88'
					},
					{
						isbn: '025',
						class: '计算机',
						name: 'Javascript高级程序设计',
						author: 'Nicholas C.Zakas',
						press: '中国公信出版社',
						date: '2025-3-3',
						total: '300',
						nums: '280',
						price: '29.88'
					},
					{
						isbn: '026',
						class: '计算机',
						name: 'Javascript高级程序设计',
						author: 'Nicholas C.Zakas',
						press: '中国公信出版社',
						date: '2025-3-3',
						total: '300',
						nums: '280',
						price: '29.88'
					}
				],
				getBooks: {
					bookName: '',
					authorName: '',
					ISBNNum: '',
					bookClass: '',
					press: ''
				},
				flag: false
			}
		},
		methods: {
			changeFun: function() {
				this.flag = true;
				setTimeout(() => {
				this.flag = false;
				}, 1000);
			},
			lookupFun: function () {
				this.$message.success('暂无信息');
			},
			borrowFun: function() {
				this.$message.success('借阅成功');
			},
			currentChangeFun: function() {
				this.flag = true;
				setTimeout(() => {
				this.flag = false;
				}, 1000);
			}
		}
	}
</script>

<style>
	.paging {
		margin: 60px 50px 20px 740px;
	}
</style>
